<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<script src="../js/jquery-2.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="container">
			<!--头部logo...-->
			<div class="row">
				<nav class="navbar">
					<ul class="nav nav-tabs text-right">
						<li>
							<a href="#"><img src="http://www.hxzyyn.com/img2/logo.png" /></a>
						</li>
						<li class="pull-right">欢迎您！管理员
							<a>username</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
		<div class="navbar navbar-default mantop">
			<!--头部导航条-->
			<ul class="nav">
				<li class="text-warning text-center" style="font-size: 200%;">教师调查管理系统</li>
			</ul>
		</div>
		<div style="width: 10%">
			<div class="navbar pull-left" style="background: url(../img/leftline.gif) repeat-y right;width: 90%;">
				<ul class="nav nav-pills nav-stacked">
					<li>
						<a href="#">查看调查信息</a>
					</li>
					<li>
						<a href="#">调查内容</a>
					</li>
					<li>
						<a href="#">专业管理</a>
					</li>
					<li>
						<a href="#">课程管理</a>
					</li>
					<li>
						<a href="#">教师管理</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="panel panel-default pull-right mantab">
			<div class="panel-body">

				<div>
					<i>调查日期：</i>
					<select id="date_sele" style="width: 10%;"></select>
					<!--选择日期的下拉框-->
				</div>
				<table class="table">
					<tr id="tab">
						<th class="text-center">教师</th>
						<th class="text-center">课程</th>
						<th class="text-center">平均分</th>
						<th class="text-center">评分的人数</th>
						<th class="text-center">评分的详情</th>
					</tr>
				</table>
			</div>
		</div>
        
      
		<script type="text/javascript">
			$.ajax({ //填充表格
				type: "post",
				url: "GetDetail",
				success: function(data) {
					var da = $.parseJSON(data);
					var html = "";
					var mid=1;
					$.each(da.teachers, function(index, sd) {
						mid++;
						html += "<tr class='rows'><td>" + sd.teacherName + "</td>" +
							"<td>" + sd.coursesName + "</td>" +
							"<td>" + sd.avg + "</td>" +
							"<td>" + sd.score_Man + "</td>" +
							"<td>" +
							"<button class='btn dropdown-toggle' data-toggle='modal' data-target = '#modal_info"+mid+"'>详情</button>";
							
						html+="<div class='modal fade' id='modal_info"+mid+"' role='dialog' aria-hidden='true'>"+
         	                  "<div class='modal-dialog'>"+
         		              "<div class='modal-content'>"+
         			          "<div class='modal-header'>"+
         			          "<button class='close' data-dismiss='modal' aria-hidden='true'>&times</button>"+
         			 	      "<h4>每个人的的评分</h4>"+
         			          "</div>"+
         			          "<div class='modal-body'>"+
         			          "<table class='table'>"+
         			 		  "<tr><th class='text-center'>ID：</th><th class='text-center'>得分</th><th class='text-center'>学生编号：</th><th class='text-center'>学生评价/建议</th><th class='text-center'>得分详细</th></tr>";
						$.each(sd.items, function(index2, info) {
							html += "<tr><td>" + info.imid + "</td><td>" + info.score_Num + "</td><td>" + info.session_Id + "</td><td>" + info.suggest+ "</td>"+
							        "<td><div class='dropdown'>"+
          	                         "<button class='btn dropdown-toggle' data-toggle ='dropdown'>详细</button>"+
          	                         "<table class='table dropdown-menu'>"+
          		                     "<tr><th class='text-center'>项目细节</th><th class='text-center'>得分</th></tr>";
							        $.each(info.details, function(index3,detail) {
							        	html+="<tr><td>"+detail.contentName+"</td><td>"+detail.score_One+"分</td></tr>"
							        });
							html+="</table></div></td></tr>";        
						});
						    html+="</table></div></div></div></div>"; 
						    html += "</td></tr>";
					});
					$("#tab").after(html);
					$.each(da.dates, function(index2, dt) {
						$("#date_sele").append("<option class='date_app' value='" + dt.date + "'>" + dt.date + "</option>");
					});
					scoredown();
				}
			});
			
			
			$("#date_sele").change(function(e) { //如果下拉框内容改变就改变表格内容
				var ele = e.target;
				$.ajax({
					type: "get",
					url: "GetDetail?mdate=" + ele.value,
					success: function(date) {
						var da = $.parseJSON(date);
						var html = "";
						var mid=1;
					$.each(da.teachers, function(index, sd) {
						mid++;
						html += "<tr class='rows'><td>" + sd.teacherName + "</td>" +
							"<td>" + sd.coursesName + "</td>" +
							"<td>" + sd.avg + "</td>" +
							"<td>" + sd.score_Man + "</td>" +
							"<td>" +
							"<button class='btn dropdown-toggle' data-toggle='modal' data-target = '#modal_info"+mid+"'>详情</button>";
							
						html+="<div class='modal fade' id='modal_info"+mid+"' role='dialog' aria-hidden='true'>"+
         	                  "<div class='modal-dialog'>"+
         		              "<div class='modal-content'>"+
         			          "<div class='modal-header'>"+
         			          "<button class='close' data-dismiss='modal' aria-hidden='true'>&times</button>"+
         			 	      "<h4>每个人的的评分</h4>"+
         			          "</div>"+
         			          "<div class='modal-body'>"+
         			          "<table class='table'>"+
         			 		  "<tr><th class='text-center'>学生编号：</th><th class='text-center'>得分</th><th class='text-center'>得分详细</th></tr>";
						$.each(sd.items, function(index2, info) {
							html += "<tr><td>" + info.imid + "</td><td>" + info.score_Num + "</td>"+
							        "<td><div class='dropdown'>"+
          	                         "<button class='btn dropdown-toggle' data-toggle ='dropdown'>详细</button>"+
          	                         "<table class='table dropdown-menu'>"+
          		                     "<tr><th class='text-center'>项目细节</th><th class='text-center'>得分</th></tr>";
							        $.each(info.details, function(index3,detail) {
							        	html+="<tr><td>"+detail.contentName+"</td><td>"+detail.score_One+"分</td></tr>"
							        });
							html+="</table></div></td></tr>";        
						});
						    html+="</table></div></div></div></div>"; 
						    html += "</td></tr>";
					});
						$(".rows").html("");
						$("#tab").after(html);
						scoredown();
					}
				});
			});
 

			function scoredown() {
				$("button").click(function() {
					$(".hidden").slideToggle();
				});
			}
		</script>
		<style type="text/css">
			td {
				text-align: center;
				width: 20%;
			}
		</style>
	</body>

</html>